<thead>
<tr>
<? for(let i in stru){ ?>
<th
data-field='<?= stru[i]['title']?>'
data-sortable='true'
data-align='left'
data-width=''
data-visible='true'
>
<?= stru[i]['title']?>
</th>
<? } ?>
<th
data-field='operate'
data-sortable='false'
data-align='center'
data-width='150'
data-clickToSelect='false'
data-events='window.operateEvents'
data-formatter='operateFormatter'>
<a href="<?= global['url'] ?>?op=form_custom" class="" title='新增'>
<i class="bi bi-file-earmark-plus"></i>
</a>
</th>
</tr>
</thead>
函式屬性,可以放在 html中,例 data-field 如果放在 js 則用 field
data-field:欄位名稱
data-sortable:是否排序 true false
data-align:水平對齊 left center right
data-width:欄位寬度,單位 px
data-visible:欄位是否出現
data-events:按鈕事件,調用的 windows.xxx =>必在 放在「$("#table").bootstrapTable({})」前面
data-formatter:按鈕
window.operateEvents = {
'click .show': function (e, value, row, index) {//顯示單筆
alert('查詢');//
},
'click .edit': function (e, value, row, index) {
top.location.href='<?= global.url ?>?op=form_custom&&sn='+row[0]
},
'click .delete': function (e, value, row, index) {
alert('刪除');
}
}
function operateFormatter(value, row, index) {
console.log(row)
return [
'<a class="show me-2" href="javascript:void(0)" title="查詢" target="_self">',
'<i class="bi bi-search"></i>',
'</a>',
'<a class="edit me-2" href="javascript:void(0)" title="編輯" target="_self">',
'<i class="bi bi-pencil-square"></i>',
'</a>',
'<a class="delete me-2 text-danger" href="javascript:void(0)" title="刪除" target="_self">',
'<i class="bi bi-file-earmark-x"></i>',
'</a>'
].join('')
}
$(function(){
// 參數設定:https://examples.bootstrap-table.com/#options/table-ajax.html
$("#table").bootstrapTable({
classes: 'table table-sm table-striped table-bordered table-hover', //表格樣式 table table-sm table-striped table-bordered table-hover
toolbar: '#toolbar', //工具按鈕用哪個容器
cache: false, //是否使用快取,預設為 true,所以一般情況下需要設定一下這個屬性(*)
uniqueId:'', //哪一個欄位是key
sortName:'', //依照那個欄位排序
// height : 450, //高度
sortable: false, //是否啟用排序
sortOrder:'', //asc
sidePagination: "client", //分頁方式:client 使用者端分頁,server 伺服器端分頁(*)
theadClasses: 'table-light', //標題列樣式
//可於ToolBar上顯示的按鈕
buttonsClass: "primary", //
buttonsAlign: "left", //left right
showColumns : true, //顯示/隱藏哪些欄位
showToggle : true, //名片式/table式切換
showRefresh : false, //重新整理
showPaginationSwitch : true, //分頁/不分頁切換
showFullscreen: true, //顯示全螢幕
search : true, //查詢
buttons : '', //返回主檔按鈕
// cardView: true, //是否顯示詳細檢視
// detailView: true, //是否顯示父子表
showExport: true, //是否顯示匯出
exportDataType: 'basic', //匯出資料型別,支援:'基本','全部','選中'
exportTypes:['json', 'csv', 'excel', 'xlsx', 'png'], //匯出型別
pagination : true, //使否要分頁
pageNumber:1, //初始化載入第一頁,預設第一頁
onPageChange:function(currentPage, pageSize) {
//console.log("目前頁數: "+currentPage+" ,一頁顯示: "+pageSize+" 筆");
},
pageSize : 20, //一頁顯示幾筆
pageList : "[ 20, 50, 100, all]", //一頁顯示幾筆的選項
formatRecordsPerPage:function(pageSize) {
return ' 每頁顯示 ' + pageSize + ' 筆';
},
formatShowingRows:function(fromIndex, toIndex, totalSize) {
//目前第幾頁
var currentPage = Math.ceil(fromIndex / this.pageSize);
//總共幾頁
var totalPageCount = Math.ceil(totalSize / this.pageSize);
return currentPage+' / '+totalPageCount;
}
});
})
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script>
<!--bootstrap-table-export-->
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
<!--在客户端保存生成的导出文件-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/export/libs/FileSaver.js/FileSaver.min.js"></script>
<!--以XLSX(Excel 2007+ XML格式)格式导出表(SheetJS)-->
<script src=" https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.6/xlsx.core.min.js"></script>
<!--以PNG格式导出表格-->
<!--对于IE支持包括 html2canvas 之前的 es6-promise-->
<script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<!--无论期望的格式如何,最后都包含 tableexport.jquery.plugin(不是tableexport)-->
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<!-- 流水號 客戶名稱 客戶電話 客戶地址 備註 -->
<div id="toolbar"></div>
<table id="table">
<thead>
<tr>
<? for(let i in stru){ ?>
<th
data-field='<?= stru[i]['title']?>'
data-sortable='true'
data-align='left'
data-width=''
data-visible='true'
>
<?= stru[i]['title']?>
</th>
<? } ?>
<th
data-field='operate'
data-sortable='false'
data-align='center'
data-width='150'
data-clickToSelect='false'
data-events='window.operateEvents'
data-formatter='operateFormatter'>
<a href="<?= global['url'] ?>?op=form_custom" class="" title='新增'>
<i class="bi bi-file-earmark-plus"></i>
</a>
</th>
</tr>
</thead>
<tbody>
<!-- 1 育將電腦 123456789 台南市永康區大灣路158號 備註1 -->
<? for(let i in rows){ ?>
<tr>
<? for(let j in rows[i]){?>
<td><?= rows[i][j] ?></td>
<? } ?>
<td></td>
</tr>
<? } ?>
</tbody>
</table>
<script>
window.operateEvents = {
'click .show': function (e, value, row, index) {//顯示單筆
alert('查詢');//
},
'click .edit': function (e, value, row, index) {
top.location.href='<?= global.url ?>?op=form_custom&&sn='+row[0]
},
'click .delete': function (e, value, row, index) {
alert('刪除');
}
}
function operateFormatter(value, row, index) {
console.log(row)
return [
'<a class="show me-2" href="javascript:void(0)" title="查詢" target="_self">',
'<i class="bi bi-search"></i>',
'</a>',
'<a class="edit me-2" href="javascript:void(0)" title="編輯" target="_self">',
'<i class="bi bi-pencil-square"></i>',
'</a>',
'<a class="delete me-2 text-danger" href="javascript:void(0)" title="刪除" target="_self">',
'<i class="bi bi-file-earmark-x"></i>',
'</a>'
].join('')
}
$(function(){
// 參數設定:https://examples.bootstrap-table.com/#options/table-ajax.html
$("#table").bootstrapTable({
classes: 'table table-sm table-striped table-bordered table-hover', //表格樣式 table table-sm table-striped table-bordered table-hover
toolbar: '#toolbar', //工具按鈕用哪個容器
cache: false, //是否使用快取,預設為 true,所以一般情況下需要設定一下這個屬性(*)
uniqueId:'', //哪一個欄位是key
sortName:'', //依照那個欄位排序
// height : 450, //高度
sortable: false, //是否啟用排序
sortOrder:'', //asc
sidePagination: "client", //分頁方式:client 使用者端分頁,server 伺服器端分頁(*)
theadClasses: 'table-light', //標題列樣式
//可於ToolBar上顯示的按鈕
buttonsClass: "primary", //
buttonsAlign: "left", //left right
showColumns : true, //顯示/隱藏哪些欄位
showToggle : true, //名片式/table式切換
showRefresh : false, //重新整理
showPaginationSwitch : true, //分頁/不分頁切換
showFullscreen: true, //顯示全螢幕
search : true, //查詢
buttons : '', //返回主檔按鈕
// cardView: true, //是否顯示詳細檢視
// detailView: true, //是否顯示父子表
showExport: true, //是否顯示匯出
exportDataType: 'basic', //匯出資料型別,支援:'基本','全部','選中'
exportTypes:['json', 'csv', 'excel', 'xlsx', 'png'], //匯出型別
pagination : true, //使否要分頁
pageNumber:1, //初始化載入第一頁,預設第一頁
onPageChange:function(currentPage, pageSize) {
//console.log("目前頁數: "+currentPage+" ,一頁顯示: "+pageSize+" 筆");
},
pageSize : 20, //一頁顯示幾筆
pageList : "[ 20, 50, 100, all]", //一頁顯示幾筆的選項
formatRecordsPerPage:function(pageSize) {
return ' 每頁顯示 ' + pageSize + ' 筆';
},
formatShowingRows:function(fromIndex, toIndex, totalSize) {
//目前第幾頁
var currentPage = Math.ceil(fromIndex / this.pageSize);
//總共幾頁
var totalPageCount = Math.ceil(totalSize / this.pageSize);
return currentPage+' / '+totalPageCount;
}
});
})
</script>